<template>
  <el-card class="demo-card">
    <template #header>
      <h3>右键菜单</h3>
    </template>
    <div>组件描述</div>
  </el-card>
  <div class="container">
    <ContextMenu
      :menu="[
        { label: '菜单1' },
        { label: '菜单2', disabled: true },
        {
          label: '菜单3',
          children: [
            {
              label: '菜单3-1',
            },
            {
              label: '菜单3-2',
            },
          ],
        },
      ]"
      @select="(v) => handleSelect(v, 'left')"
    >
      <div class="left">
        {{ selectInfo.left }}
      </div>
    </ContextMenu>
    <ContextMenu
      :menu="[
        { label: '菜单3' },
        { label: '菜单4' },
        { label: '菜单5', divided: true },
        { label: '菜单6' },
      ]"
      @select="(v) => handleSelect(v, 'right')"
    >
      <div class="right">
        <p>{{ selectInfo.right }}</p>
        <ContextMenu
          :menu="[{ label: '菜单5' }, { label: '菜单6' }]"
          @select="(v) => handleSelect(v, 'rightChind')"
        >
          <div>{{ selectInfo.rightChind }}</div>
        </ContextMenu>
      </div>
    </ContextMenu>
  </div>
</template>

<script setup>
import ContextMenu from "@/components/Basic/ContextMenu/index.vue";
import { ref } from "vue";
const selectInfo = ref({
  left: "",
  right: "",
  rightChind: "",
});

function handleSelect(item, key) {
  selectInfo.value[key] = item.label;
}
</script>

<style scoped>
.container {
  width: 100%;
  gap: 10px;
}

.container > .menu-container {
  flex: 1;
  height: 200px;
  margin: 10px;
}
.left {
  background: #dc2626;
}
.right {
  background: #a3e635;
  padding: 50px;
}
.right > div {
  height: 100%;
  width: 100%;
  background: #fbbf24;
}
.left,
.right {
  height: 100%;
  border-radius: 5px;
}
</style>
